Learn how to create great-looking, interactive maps with d3.

A comprehensive video course to create geospatial data visualizations with javascript and d3.

Get the first six-part lesson for free on creating a simple map.

Learning d3 can be hard

You not only need to learn d3 but a lot of other concepts before that.

SVG/Canvas
HTML
Javascript

There are a lot of ways of doing things in d3. There is no one approach.
If you search on social networks and google, there are a ton of tweets and blog posts about why d3 is hard for them.

"I want to just jump in, yet it seems like I need to know a bunch of the api to get even a simple graph up."

Learning with examples is frustrating

Most people learn d3 by looking at examples and changing parts of it to fit their needs.

You iterate on these examples, look at the documentation, maybe consult a book or look at videos on YouTube.

But people get frustrated using this method.

"After looking at a few d3.js demos, I had thought that the above task would be trivially easy with d3.js, but in fact I have found it to be insanely difficult."

Undocumented example code makes it harder to learn

A lot of examples don’t have of comments or explanations. Which makes it hard to understand what is being done.

"Without comments and explanations of what is happening along the way, it’s very hard for someone starting out to figure out what’s going on."

Potentially bad code is hard to fix

Everyone can create examples with d3, and it’s hard to know the experience level of the creator.
Examples may have bad or repetitive code. If you learn with these possibly bad examples, you could learn the wrong things.

"There’s the problem of blocks that are written with bad code, or don’t include the necessary data files or libraries."

Old examples lead to more frustration

Thanks to the introduction of observable more examples are created with the current version of d3. But on bl.ocks a majority of examples are still created with v3 which was replaced in 2016 with v4.

"Most of the resources I’ve found are either old (v3, I know I can still follow them, but I’d rather follow a v4 tutorial) or very convoluted. It seems like I spend half my time trying to figure out why the graph won’t compile."

Most d3.js tutorials only scratch the surface

"I’ve gone through some tutorials but I find that they only scratch the surface and are often fragmented — learning the code for building a scale doesn’t mean anything to me without the accompanying chart."

Inspired by the amazing @milafrerichs #D3 workshop at #foss4gna, I was able to create an interactive globe map of my twitter friends.

Chris Marx

How this course is different

Geospatial Data Visualization with d3 will help you take a more focussed approach for learning d3.

Retain more by learning with projects

Project-based learning is believed to result in more in-depth knowledge through active exploration of real-world challenges and problems.

“[Project-based learning] encourages higher order critical thinking and de-emphasizes memorization. Increases motivation to learn in order to arrive at a solution. “

Self-check your learning

Check what you learn after each section with exercises.

Stay on top of your learning path

Weekly accountability emails will help you stay on top of your learning experience and keep you motivated.

Modeled from successful hands-on workshops

This course is modeled from hands-on workshops at geospatial conferences I gave over the last three years.

I iterated on the format, the course content, and examples over the years to land on this course format and content.

Conferences I gave this workshop at:

FOSS4G UK 2019
FOSS4G Noth America 2019
FOSS4G Oceania 2018
FOSS4G 2017

Plans

Self-Study

Access to online-course
4 course projects
> 17 lessons
> 68 excercises

You will get access to the course website and all course material and go through the course by yourself.

$199 $139

Preorder!

Group Study

Access to online-course
4 course projects
> 17 lessons
> 68 excercises
Weekly accountability emails
By-weekly group coaching call
Access to accountability forum and group

You get access to the course and will be assigned to a group of 5 people. Your group will get access to a special forum where you can discuss your projects and your progress. I will be available as well for questions and help.

$450 $315

Preorder now!

Group Study Pro

Access to online-course
4 course projects
> 17 lessons
> 68 excercises
Weekly accountability emails
By-weekly group coaching call
Access to accountability forum and group
Lifetime access to updates
1x 30 60 minute call with me
Library of starter projects
Templates (private github repo)
Tip ebook

$999 $699

Preorder!

If you're having trouble with the integrated buying option click here

Course content

Lesson 1: Simplest Map Possible Learnings

In this lesson, you'll create your first simple map. You'll learn all the important aspects of creating maps with d3.

Lesson 2: Housing Burden Project - Basic Choropleth Map

Create our first map from a GeoJSON and how to style it.

Lesson 3: Housing Burden Project - Interactivity

How to make your map interactive with tooltips and zoom

Lesson 4: Housing Burden Project - Bubble Map

Learn the concepts of creating a bubble map

Lesson 5: Housing Burden Project - Annotations

How to enhance your map with annotations

Lesson 6: Bousing Burden Project - small multiples

What are small multiplies and how to use them.

Lesson 7: Housing Burden Project - reusable code

How to create code that is reusable among projects and make updating your chart easier

Lesson 8: Housing Burden Project - responsiveness

Create responsive maps with d3

Lesson 9: housing burden project - Animations

How to animate your maps with transitions.

Lesson 10: housing burden - dashboard

Bringing all together and create our first dashboard.

Advanced Course Content

The more advanced part of the course is still t.b.d. and you can influence the direction of the course.

Lesson: Live Election Map Project

How to update your chart with live data.

Lesson: Hexbin Map

When to use Hexbins How to create Hexbins

Lesson: Multivariate Choropleth Map

What are Multivariate Choropleth Maps

How to use and create them

Lesson: Project NO2 levels in the atmosphere

How to get satellite data, how to display raster data on a d3 map

Lesson: Zoning Project

How to use canvas to visualize all buildings in San Diego and their property zone.

Lesson: Basemaps with d3

How to use vector tiles with d3

How to use raster tiles with d3

Bonus: Data Aggregations with d3 Learnings: Rollup, map

Projects

Project 1: Housing Burden Chicago

We look at the amount people of Chicago need to invest in housing. There is an interesting dataset from the city of Chicago.

We first create a basic Choropleth map to visualize the housing burden per neighborhood. The info window will include a bubble map as well with additional data.

We then move forward and create a dashboard with interactivity, tables, and small multiples.

Project 2: Live Election Map

We look at a mock election for a city election. I will provide a server with real-time data of results and we use Choropleth maps and Cartograms to visualize the election results.

Project 3: NO2 levels in a City

Using satellite raster data we look at NO2 levels in different cities around the world.

Project 4: Single Family zoning in San Diego

We look at zoning data for the city of San Diego and look at different ways to map

What kind of maps will you be able to create after you‘ve gone through the course?

Attributions:

Hexbin map at top: Mike Bostock
Choropleth Map: New York Time
Bubble Map: Washington Post